package com.wake.mycomposebook.ui.home.layouts.advlist

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.wake.data.DemoDataProvider
import com.wake.data.model.Item
import com.wake.myapplication.VerticalGrid

/**
 *@author created by WA03675
 *@date  2022-04-19 16:34
 *@des   1.如何设置未选中状态
 */

enum class MyAnimatedListType {
    NOTHINGS,
    FADE,
    SCALE,
    SLIDE,
    FADE_SLIDE,
    SLIDE_UP,
    ROTATEX
}

@Composable
fun AnimatedList() {
    Column(
        Modifier
            .padding(16.dp, 0.dp)

    ) {
        var choTabs by remember {
            mutableStateOf(MyAnimatedListType.NOTHINGS)
        }
        MyAnimatedListTabs(choTabs)
        Spacer(modifier = Modifier.padding(16.dp))
        MyAnimatedList(choTabs)

    }
}


@Composable
fun MyAnimatedListTabs(choTabs: MyAnimatedListType) {
    var choTabs = choTabs

    VerticalGrid(columns = 3, modifier = Modifier.fillMaxWidth()) {
        MyAnimatedListType.values().forEach {
            if (it != MyAnimatedListType.NOTHINGS) {
                MyAnimaTabsItem(it, choTabs) {
                    choTabs = it
                }
            }
        }
    }

}

@Composable
fun MyAnimaTabsItem(type: MyAnimatedListType, choTabs: MyAnimatedListType, click: () -> Unit) {
    Button(
        onClick = click,
        modifier = Modifier
            .padding(10.dp)
            .border(1.dp, Color.Gray.copy(0.5f), RoundedCornerShape(30.dp)),
        colors = MyButtonColor(choType = type, choTabs = choTabs)
    ) {
        Text(text = type.name, color = if (choTabs == type) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onBackground)
    }
}

@Composable
fun MyButtonColor(choType: MyAnimatedListType, choTabs: MyAnimatedListType): ButtonColors {
    return ButtonDefaults.buttonColors(
        containerColor = if (choTabs == choType) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.background
    )
}


@Composable
fun MyAnimatedList(choTabs: MyAnimatedListType) {
    val lists = DemoDataProvider.itemList
    LazyColumn {
        items(lists, key = { item -> return@items item.id }) {
            MyAnimateItem(item = it, choTabs)
        }
    }
}

@Composable
fun MyAnimateItem(item: Item, choTabs: MyAnimatedListType) {
    val modifier = if (choTabs == MyAnimatedListType.FADE) {
        val animProgress = remember {
            androidx.compose.animation.core.Animatable(initialValue = 0f)
        }
        LaunchedEffect(Unit) {
            animProgress.animateTo(targetValue = 1f, animationSpec = tween(600))
        }
         Modifier.padding(8.dp)
    } else {
        val animatedProgress = remember { Animatable(initialValue = 0.8f) }
        LaunchedEffect(Unit) {
            animatedProgress.animateTo(
                targetValue = 1f,
                animationSpec = tween(300, easing = LinearEasing)
            )
        }
        Modifier
            .padding(8.dp)
            .graphicsLayer(scaleY = animatedProgress.value, scaleX = animatedProgress.value)
    }
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = item.imageId), contentDescription = null,
            Modifier
                .width(80.dp)
                .height(80.dp)
        )

        Column(Modifier.weight(1f)) {
            Text(text = item.title, style = MaterialTheme.typography.titleMedium, maxLines = 1, overflow = TextOverflow.Ellipsis)
            Text(text = item.subtitle, style = MaterialTheme.typography.bodyMedium, maxLines = 1, overflow = TextOverflow.Ellipsis)
        }

        Icon(imageVector = Icons.Default.Menu, contentDescription = null)
    }
}

@Composable
@Preview
fun PreMyAnimateList() {
    AnimatedList()
}